<!-- 定义导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
        <!-- 导航栏商标 -->
        <div>
            <a class="navbar-brand" href="{% url 'home:index' %}">个人博客</a>
        </div>
        <div class="collapse navbar-collapse">
            <div>
                <ul class="nav navbar-nav">
                    {% for cat in categories %}
                        <li {% if cat == category %} class="nav-item active" {% else %} class="nav-item" {% endif %}>
                            <a href="{% url 'home:index' %}?cat_id={{ cat.id}}" class="nav-link mr-2">{{cat.title}}</a>
                        </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </div>
    <!--登录/个人中心-->
    <div class="navbar-collapse">
        <ul class="nav navbar-nav">
            {% if user.is_authenticated %}
            <!-- 如果用户已经登录，则显示用户名下拉框 -->
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" @click="show_menu_click">{{user.username}}</a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown" style="display: block" v-show="show_menu">
                        <a class="dropdown-item" href="{% url 'user:write' %}">写文章</a>
                        <a class="dropdown-item" href="{% url 'user:center' %}">个人信息</a>
                        <a class="dropdown-item" href="{% url 'user:logout' %}">退出登录</a>
                    </div>
                </li>
            {% else %}
            <!-- 如果用户未登录，则显示登录按钮 -->
                <li class="nav-item">
                    <a class="nav-link" href="{% url 'user:login' %}">登录</a>
                </li>
            {% endif %}
        </ul>
    </div>
</nav>